<template>
  <div class="navigator" :style="[{paddingTop: computedBarHeight, backgroundColor: computedBgC}]">
    <!-- 左边按钮 emmmm 暂无需求 -->
    <div class="left-button" @click="tapHandler">
      <img class="image" :src="leftBtnSrc" />
    </div>
    <!-- 中间标题 -->
    <div class="title" :style="{color: titleColor}">{{title}}</div>
    <!-- 右边间隙 -->
  </div>
</template>

<script>
export default {
  name: 'CustomNavigation',
  data () {
    return {
      statusBarHeight: 0,
      opacity: 0
    }
  },
  props: {
    title: {
      type: String,
      default: '小程序'
    },
    leftBtnSrc: {
      type: String,
      default: ''
    },
    titleColor: {
      type: String,
      default: '#fff'
    }
  },
  computed: {
    computedBarHeight () {
      return this.statusBarHeight + 'px'
    },
    computedBgC () {
      return `rgba(65, 208, 177, ${this.opacity})`
    }
  },
  methods: {
    changeOpacity (opacity) { // 父级滚动时调用该方法改变opacity
      this.opacity = opacity
    },
    tapHandler () {
      this.$emit('handleClick')
    }
  },
  created () {
    // 获取导航条的高度
    const INFO = wx.getSystemInfoSync()
    this.statusBarHeight = INFO.statusBarHeight
  }
}
</script>

<style lang="stylus" scoped>
  .navigator
    position fixed
    top 0
    left 0
    display flex
    flex-direction row
    width 100%
    height 44px
    background-color rgba(3, 169, 244, 0)
    z-index 999
    .left-button
      display flex
      flex 0 0 50px
      height 44px
      align-items center
      justify-content center
      .image
        width 25px
        height 25px
    .title
      flex 1
      height 0
      margin-right 50px
      padding-top 2.8%
      text-align center
      font-size 16px
      font-weight 500
</style>
